import React, { Component } from "react";
import "./cart.scss";
import { NavBar } from "antd-mobile";
import empty_img from "../../assets/images/empty.jpg";
import empty_product from "../../assets/images/empty_product.jpg"
export default class Cart extends Component {
  state = {
    carts: [],
  };
  componentDidMount() {
    // 请求本地的数据
    let carts_str = localStorage.getItem("carts");
    let carts = JSON.parse(carts_str);
    this.setState({
      carts: carts,
    });
  }
  render() {
    return (
      <div className="app-cart">
        {!this.state.carts.length ? (
          <div className="empty-cart">
            <img src={empty_img} alt="" />
          </div>
        ) : (
          <div className="has-cart">
            <NavBar className="cart-con">购物车</NavBar>
            <div className="cart-list">
              {this.state.carts.map((v) => {
                return (
                  <div className="cart-list-item">
                    <i className="iconfont icon-shanchu-xuanzhong"></i>
                    <img src={v.goods_small_logo?v.goods_small_logo:empty_product} alt="" />
                    <div className="item-text">
                      <div className="item-text-title">{v.goods_name}</div>
                      <div className="item-text-price">
                        <div className="price-left">
                          ￥<span>{v.goods_price}</span>
                        </div>
                        <div className="price-right">
                          <i className="iconfont icon-jian"></i>
                          <span>{v.num}</span>
                          <i className="iconfont icon-icon-1"></i>
                        </div>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
            {/* 结算 */}
            {/* 默认全选 */}
            <div className="cart-bottom">
                <div className="bottom-select">
                <i className="iconfont icon-shanchu-xuanzhong"></i>
                <span>全选</span>
                </div>
                <div className="bottom-allPrice">
                    <span className="all">合计：</span>
                   <span className="price">￥51735</span>
                </div>
                <div className="bottom-pay">
                    去结算<span>(17)</span>
                </div>
            </div>

          </div>
        )}
      </div>
    );
  }
}
